﻿<!DOCTYPE html>
<html id="home" lang="en">

    <head>
        <title>WebRTC Tab Sharing / Broadcasting ® Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="//www.webrtc-experiment.com/style.css">
        <style>video {width: 100%;}</style>
        <!-- for HTML5 el styling -->
        <script>
            document.createElement('article');
            document.createElement('footer');
        </script>
        
        <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/pcnepejfgcmidedoimegcafiabjnodhk">
        
        <script src="//www.webrtc-experiment.com/RTCMultiConnection-v1.9.js"> </script>
    </head>

    <body>
        <article>
            <header style="text-align: center;">
                <h1>WebRTC <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Chrome-Extensions/tabCapture" target="_blank">Tab Sharing</a> / Broadcasting</h1>
                <p>
                    <a href="https://www.webrtc-experiment.com/">HOME</a>
                    <span> &copy; </span>
                    <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
                    
                    .
                    <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
                    
                    .
                    <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
                </p>
            </header>
            <div class="github-stargazers"></div>
		
            <div class="experiment" id="participants"></div>

            <script>
                (function () {
                    var params = {},
                        r = /([^&=]+)=?([^&]*)/g;

                    function d(s) {
                        return decodeURIComponent(s.replace(/\+/g, ' '));
                    }

                    var match, search = window.location.search;
                    while (match = r.exec(search.substring(1)))
                        params[d(match[1])] = d(match[2]);

                    window.params = params;
                })();
                
                // http://www.rtcmulticonnection.org/docs/constructor/
                var connection = new RTCMultiConnection(params.sessionid);

                // chrome extension API fails if b=AS in the sdp
                // http://www.rtcmulticonnection.org/docs/bandwidth/
                connection.bandwidth = {};
                
                // http://www.rtcmulticonnection.org/docs/onstatechange/
                connection.onstatechange = function (state) {
                    var div = document.createElement('div');
                    div.innerHTML = '<h2>' + state + '</h2>';
                    participants.appendChild(div);
                };

                // overriding for websockets
                // http://www.rtcmulticonnection.org/docs/openSignalingChannel/
                connection.openSignalingChannel = openSignalingChannel;

                // on successfully getting shared tab
                var participants = document.getElementById('participants');
                
                // http://www.rtcmulticonnection.org/docs/onstream/
                connection.onstream = function (e) {
                    participants.insertBefore(e.mediaElement, participants.firstChild);
                };
                
                var sessionDescription = {
                    userid: params.userid,
                    extra: {},
                    session: {
                        video: true,
                        oneway: true
                    },
                    sessionid: params.sessionid
                };
                
                if(params.userid && params.sessionid) {
                    // http://www.rtcmulticonnection.org/docs/join/
                    connection.join(sessionDescription);
                }

                // using websockets for signaling
                function openSignalingChannel(config) {
                    config.channel = config.channel || this.channel;
                    var websocket = new WebSocket('wss://wsnodejs.nodejitsu.com:443');
                    websocket.onopen = function () {
                        websocket.push(JSON.stringify({
                            open: true,
                            channel: config.channel
                        }));
                        if (config.callback) config.callback(websocket);
                    };
                    websocket.onerror = function() {
                        alert('Unable to connect to wss://www.webrtc-experiment.com:8563');
                    };
                    websocket.onmessage = function (event) {
                        config.onmessage(JSON.parse(event.data));
                    };
                    websocket.push = websocket.send;
                    websocket.send = function (data) {
                        websocket.push(JSON.stringify({
                            data: data,
                            channel: config.channel
                        }));
                    };
                }
            </script>
            
            <section class="experiment">
                <h2>Prerequisites</h2>
                <ol>
                    <li>
                        <a href="https://chrome.google.com/webstore/detail/tab-capturing-sharing/pcnepejfgcmidedoimegcafiabjnodhk" target="_blank">Install chrome extension</a>.
                        <button id="install-button" style="padding: 0;background: none;height: 61px;vertical-align: middle;cursor:pointer;">
                            <img src="https://www.webrtc-experiment.com/images/btn-install-chrome-extension.png" alt="Add to Chrome">
                        </button>
                        
                        <script>
                            document.getElementById('install-button').onclick = function () {
                                !!navigator.webkitGetUserMedia && !!window.chrome && !!chrome.webstore && !!chrome.webstore.install && chrome.webstore.install('https://chrome.google.com/webstore/detail/pcnepejfgcmidedoimegcafiabjnodhk', function () {
                                    alert('Chrome Extension is installed.');
                                }, function (error) {
                                    alert(error);
                                    window.open('https://chrome.google.com/webstore/detail/tab-capturing-sharing/pcnepejfgcmidedoimegcafiabjnodhk');
                                });
                            };
                            
                            var image = document.createElement('img');
                            image.src = 'chrome-extension://pcnepejfgcmidedoimegcafiabjnodhk/images/tabCapture48.png';
                            image.onload = function () {
                                document.getElementById('install-button').parentNode.innerHTML = '<strong>Great!</strong> <a href="https://chrome.google.com/webstore/detail/tab-capturing-sharing/pcnepejfgcmidedoimegcafiabjnodhk" target="_blank">Google chrome extension</a> is installed.';
                            };
                            image.onerror = function () {
                                // alert('Chrome extension is not installed.');
                            };
                        </script>
                    </li>
                </ol>
            </section>
            
            <section class="experiment">
                <h2>How to capture tab using tabCapture APIs?</h2><br />
                <img src="https://www.webrtc-experiment.com/images/capture-tab-using-tabCapture-APIs.png" />
            </section>
            
            <br /><br />
            <section style="border: 1px solid rgb(189, 189, 189); margin: 1em 3em; border-radius: .2em;">
                <h2 id="feedback" style="padding: .2em .4em; border-bottom: 1px solid rgb(189, 189, 189);">Feedback</h2>
                <div>
                    <textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                </div>
                <button id="send-message" style="font-size: 1em;">Send Message</button>
            </section>
            
            <section class="experiment own-widgets latest-commits">
                <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
                <div id="github-commits"></div>
            </section>
        </article>
        
        <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/screen-broadcast" class="fork-left"></a>
        
        <footer>
            <p>
                <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
                © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
                <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
            </p>
        </footer>
        
        <!-- commits.js is useless for you! -->
        <script src="//www.webrtc-experiment.com/commits.js" async> </script>
    </body>
</html>
